<script setup>
import { ref, onMounted } from 'vue'
import { useAppStore } from '@/stores'
import { storeToRefs } from 'pinia'
//用户登录信息
const userStr = localStorage.getItem('user')
const user = JSON.parse(userStr)
//是否有新内容
const hasNewContent = ref(false)
// /拿到教师数据
const not = useAppStore()
const { tableData } = storeToRefs(not)
const { getNotice } = not

const fetNotice = () => {
  if (tableData.value.length > tableData.value.length - 1) {
    hasNewContent.value = !hasNewContent.value
    getNotice()
  } else {
    hasNewContent.value = false
  }
  //当用户点击了收件箱就取消小红点
}
onMounted(() => {
  fetNotice()
})

//清除小红点
const clearNotice = () => {
  hasNewContent.value = false
}
</script>

<script setup></script>

<template>
  <div id="home">
    <head-tabar></head-tabar>
    <el-container style="margin-top: 5rem; height: 100%">
      <el-aside style="width: 15.625rem; margin-left: 0.625rem; border-radius: 0.3125rem">
        <el-scrollbar>
          <div class="aside-user">
            <div class="user">
              <el-avatar class="avater" src="/src/assets/head1.jpeg"></el-avatar>
              <p
                style="
                  font-size: 1.5625rem;
                  margin-top: 0.3125rem;
                  text-align: center;
                  margin-bottom: 0rem;
                "
              >
                {{ user.username }}
              </p>
            </div>
            <el-menu class="el-menu-vertical-demo" style="height: 100%" router>
              <el-menu-item index="/home/Course">
                <i class="el-icon-menu"></i>
                <template v-slot:title>
                  <span>课程</span>
                </template>
              </el-menu-item>

              <el-menu-item index="/home/write">
                <i class="el-icon-setting"></i>
                <template v-slot:title>
                  <div v-if="hasNewContent" class="red-dot"></div>
                  <span @click="clearNotice">收件箱</span>
                </template>
              </el-menu-item>

              <el-menu-item index="/home/group">
                <i class="el-icon-s-custom"></i>
                <template v-slot:title>
                  <span>小组</span>
                </template>
              </el-menu-item>
              <el-menu-item index="/home/CD">
                <i class="el-icon-cloudy"></i>
                <template v-slot:title>
                  <span>云盘</span>
                </template>
              </el-menu-item>
              <el-menu-item index="/home/friend">
                <i class="el-icon-collection-tag"></i>
                <template v-slot:title>
                  <span>通讯录</span>
                </template>
              </el-menu-item>
            </el-menu>
          </div>
        </el-scrollbar>
      </el-aside>

      <el-main style="padding: 0rem; margin-left: 1.25rem; margin-right: 1.25rem">
        <el-scrollbar>
          <router-view></router-view>
        </el-scrollbar>
      </el-main>
    </el-container>
  </div>
</template>

<style lang="scss" scoped>
#home {
  position: fixed;
  width: 100vw;
  height: 100vh;
  background: #f1f1f1;

  .aside-user {
    height: 100vh;

    .user {
      height: 14.5rem;
      background-color: #75c3b7;
      background-size: 100% 100%;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;

      .avater {
        width: 5rem;
        height: 5rem;
      }
    }
  }
}
.red-dot {
  /* 小红点的样式 */
  width: 10px;
  height: 10px;
  background-color: red;
  border-radius: 50%;
  margin-right: 8px;
  /* 其他你需要的样式 */
}
</style>
